<template>
    <div>
        <div>
            <el-form label-width="120px">
                <el-form-item label="动物1脚数量：">
                    <el-input-number :min="1" :max="8" v-model="formData.animal1FootCount" @change="calc"></el-input-number>
                </el-form-item>
                <el-form-item label="动物2脚数量：">
                    <el-input-number :min="1" :max="8" v-model="formData.animal2FootCount" @change="calc"></el-input-number>
                </el-form-item>
                <el-form-item label="头总数：">
                    <el-input-number :min="1" :max="100" v-model="formData.headCount" @change="calc"></el-input-number>
                </el-form-item>
                <el-form-item label="脚总数：">
                    <el-input-number :min="1" :max="500" v-model="formData.footCount" @change="calc"></el-input-number>
                </el-form-item>
                <el-form-item label="假设都是：">
                    <el-radio-group v-model="formData.animalIndex" @change="calc">
                        <el-radio :label="1">动物1</el-radio>
                        <el-radio :label="2">动物2</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="动物之间距离：">
                    <el-input-number :min="1" :max="500" v-model="formData.gap" @change="calc"></el-input-number>
                </el-form-item>
<!--                <el-form-item>-->
<!--                    <el-button type="primary" @click="calc">计算</el-button>-->
<!--                </el-form-item>-->
            </el-form>
        </div>
        <div style="padding-left:10px;">
            <v-stage ref="stage" :config="stageSize" >
                <v-layer ref="layer">
<!--                    <v-circle v-for="headIndex in formData.headCount" :key="'headerIndex_' + headIndex" :config="{x: headIndex * formData.gap, y: 5, radius: 5, fill: 'green'}"/>-->
<!--                    <v-line v-for="footIndex in formData.footCount" :key="'footIndex_' + footIndex" :config="{-->
<!--                    x: 8,-->
<!--                    y: 0,-->
<!--                    points: [footIndex * formData.gap, 20, footIndex * formData.gap, 50],-->
<!--                    stroke: 'black',-->
<!--                  }"/>-->

                    <v-circle v-for="headIndex in formData.headCount" :key="'headerIndex2_' + headIndex" :config="{x: headIndex * formData.gap, y: formData.initY, radius: 5, fill: 'green'}"/>
                    <v-line v-for="(footPoint, footIndex) in footPoints" :key="'footIndex2_' + footIndex" :config="{
                    x: 0,
                    y: formData.initY - 20,
                    points: [footPoint.points[0], footPoint.points[1], footPoint.points[2], footPoint.points[3]],
                    stroke: footPoint.color,
                  }"/>
                </v-layer>
            </v-stage>
        </div>
        <div>
            <el-form label-width="120px">
                <el-form-item label="已使用脚：">
                    {{formData.headCount}} ✖ {{animalFootCount}} = {{footUsed}}（个）
                </el-form-item>
                <el-form-item label="比实际脚：">
                    {{footUsed > formData.footCount ? '多' : '少'}}{{Math.abs(footUsed - formData.footCount)}}（个）
                </el-form-item>
                <el-form-item label="结论1：">
                    需要再{{footUsed > formData.footCount ? '减' : '加'}}{{Math.abs(footUsed - formData.footCount)}}个脚
                </el-form-item>
            </el-form>
        </div>
        <div style="padding-left:10px;">
            <v-stage ref="stage" :config="stageSize" >
                <v-layer ref="layer">
                    <v-circle v-for="headIndex in formData.headCount" :key="'headerIndex2_' + headIndex" :config="{x: headIndex * formData.gap, y: formData.initY, radius: 5, fill: 'green'}"/>
                    <v-line v-for="(footPoint, footIndex) in footPoints2" :key="'footIndex2_' + footIndex" :config="{
                    x: 0,
                    y: formData.initY - 20,
                    points: [footPoint.points[0], footPoint.points[1], footPoint.points[2], footPoint.points[3]],
                    stroke: footPoint.color,
                  }"/>
                </v-layer>
            </v-stage>
        </div>
        <div>
            <el-table
                    :data="tableDataList"
                    style="width: 100%">
                <el-table-column
                        prop="animal1Count"
                        label="动物1数量"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="animal2Count"
                        label="动物2数量"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="animal1FootCount"
                        label="动物1脚总数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="animal2FootCount"
                        label="动物2脚总数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="footCount"
                        label="脚总数">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    // import Konva from "konva";
    const width = window.innerWidth - 50;
    const height = 100;
    export default {
        name: "pingyi.vue",
        data() {
            return {
                formData: {
                    gap: 80,
                    animal1FootCount: 2,
                    animal2FootCount: 4,
                    headCount: 3,
                    footCount: 9,
                    animalIndex: 1,
                    initY: 20,
                },
                footPoints: [],
                footPoints2: [],
                tableDataList: [],
                stageSize: {
                    width: width,
                    height: height
                },
            }
        },
        methods: {
            calc() {
                this.calcFootPoint()
                this.calcFootPoint2()

                let tableDataList = []
                for(let i = 0; i <= this.formData.headCount; i++) {
                    let j = this.formData.headCount - i
                    tableDataList.push({
                        'animal1Count': i,
                        'animal2Count': j,
                        'animal1FootCount': i * this.formData.animal1FootCount,
                        'animal2FootCount': j * this.formData.animal2FootCount,
                        'footCount': i * this.formData.animal1FootCount + j * this.formData.animal2FootCount
                    })
                }
                this.tableDataList = tableDataList
            },
            calcFootPoint() {
                let result = []
                let steps = []
                for(let i = 0; i < 300; i+=10) {
                    steps.push(-1 * i)
                    if (i != 0) {
                        steps.push(i)
                    }
                }
                for(let i = 0; i < this.formData.headCount; i++) {
                    for(let j = 0; j < this.animalFootCount; j++) {
                        result.push({
                            points: [this.formData.gap + i * this.formData.gap, 20, this.formData.gap + i * this.formData.gap + steps[j], 50],
                            color: 'black',
                        })
                    }
                }
                this.footPoints = result
            },
            calcFootPoint2() {
                let needPlus = this.formData.footCount > this.footUsed
                let result = []
                let steps = []
                let footGapSingle = Math.abs(this.formData.animal1FootCount - this.formData.animal2FootCount)
                let footDelta = Math.abs(this.formData.footCount - this.footUsed)
                for(let i = 0; i < 300; i+=10) {
                    steps.push(-1 * i)
                    if (i != 0) {
                        steps.push(i)
                    }
                }
                for(let i = 0; i < this.formData.headCount; i++) {
                    // let circleCount = this.formData.footCount >= this.footUsed || footDelta <= 0 ? this.animalFootCount : this.animalFootCount - footGapSingle
                    for(let j = 0; j < this.animalFootCount; j++) {
                        result.push({
                            points: [this.formData.gap + i * this.formData.gap, 20, this.formData.gap + i * this.formData.gap + steps[j], 50],
                            color: 'black',
                        })
                    }

                    if(!needPlus && footDelta >= 0) {
                        let minValue = Math.min(footDelta, footGapSingle)
                        for (let k = 0; k < minValue; k++) {
                            // console.log('i:', i, 'k:', k)
                            if(footDelta > 0 && result.length > 0) {
                                result.pop()
                                footDelta--
                            }
                            if (footDelta == 0) {
                                break
                            }
                        }
                    }

                    if(needPlus) {
                        for(let k = 0; k < footGapSingle; k++) {
                            if (footDelta == 0) {
                                break
                            }
                            result.push({
                                points: [this.formData.gap + i * this.formData.gap, 20, this.formData.gap + i * this.formData.gap + steps[k], 0],
                                color: 'red',
                            })
                            footDelta--
                        }
                    }
                }
                this.footPoints2 = result
            }
        },
        computed: {
            footUsed() {
              return this.formData.headCount * this.animalFootCount
            },
            animalFootCount() {
                return this.formData.animalIndex == 1 ? this.formData.animal1FootCount : this.formData.animal2FootCount
            },
        },
        mounted () {
            this.calc()
        }
    }
</script>

<style scoped>

</style>
